<template>
	<view class="login" :style="{height:wh+'px'}">

		<view class="juzhong">
			<h1 class="login-title">登录</h1>
			<view class="content">
				<uni-forms ref="logForm" :model="logFormData" :rules="rules" validate-trigger="blur">
					<uni-forms-item name="username">
						<uni-easyinput class="input-field" placeholder="请输入用户名" v-model="logFormData.username" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<uni-easyinput class="input-field" type="password" placeholder="请输入密码" v-model="logFormData.password" />
					</uni-forms-item>
				</uni-forms>
				<view class="button-container">
					<button class="button" type="primary" @click="login()">登录</button>
				</view>
			</view>
		</view>
			<!-- 下方的跳转注册 -->
			<view class="register">
				<navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
			</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		userStore
	} from '@/store/userStrore.js';
	let store = userStore()
	let wh = computed(() => {
		let sh = uni.getWindowInfo().screenHeight
		let wh = uni.getWindowInfo().windowHeight
		console.log(sh)
		console.log(wh);
		return wh
	})
	const logFormData = ref({
		username: '',
		password: ''
	})
	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: '请输入用户名'
				},
				{
					minLength: 3,
					maxLength: 20,
					errorMessage: '用户必须在{minLength}到{maxLength}个字符之间'
				},
				{
					pattern: '^\\w{3,20}$',
					errorMessage: '请输入3-20位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请输入密码'
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		}
	})
	let logForm = ref(null)

	function login() {
		logForm.value.validate().then((res) => {
			// 验证通过
			console.log(res)

			uni.$post("https://julwaqq0.lc-cn-n1-shared.com/1.1/login", res)
				.then(res2 => {
					console.log(res2);
					if (res2.statusCode == 400) {
						uni.showToast({
							title: "用户名或密码错误..."
						})
					} else if (res2.statusCode == 200) {
						store.addUserInfo(res2.data.username, res2.data.mobilePhoneNumber);
						uni.navigateBack()
						// uni.navigateTo({
						// 	url: '/pages/user/user'
						// })	
					}
				}).catch(err => {
					// 失败
					console.log(err);
				})

		}).catch(err => {
			// 验证失败
			console.log(err)
		})
	}
</script>

<style scoped>
	.login {
		display: flex; /* 使用 Flexbox */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 100vh; /* 使其占满整个视口高度 */
		background-image: url("../../static/dengl.png"); /* 背景图片 */
		background-size: cover; /* 背景图片覆盖整个区域 */
		background-position: center; /* 背景图片居中 */
		background-repeat: no-repeat; /* 不重复背景图片 */
	}

	.juzhong {
		background: rgba(255, 255, 255, 0.6); /* 背景颜色，稍微透明 */
		border-radius: 10px; /* 圆角 */
		padding: 20px; /* 增加内边距 */
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
		max-width: 400px; /* 设置最大宽度 */
		width: 75%; /* 使其宽度为100% */
		text-align: center; /* 内容居中 */
	}

	/* 图片区域距离上方距离 */
	.login .title {
		margin: 0;
		padding: 0;
		width: 540rpx;
		height: 200rpx;
		margin: auto;
		margin-top: 100px;
		/* border: 1px solid red; */
	}

	/* 图片样式可以使用新增的 .zzz 类来定义，而不是用 nth-child */
	.login .title .zzz:nth-child(1) {
		height: 50px;
	}

	.login .title .zzz:nth-child(2) {
		height: 30px;
	}

	/* 内容区域的外边距 */
	.login .content {
		margin: 10px 20px;
	}

	/* 注册链接样式 */
	.login .register {
		position: absolute;
		bottom: 20px;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 20rpx;
	}
</style>